<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>01-声明周期</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- 准备好一个容器-->
        <div id="app">
            <h1>{{num}}</h1>
            <button id="btn" @click="add">+1</button>
            <button @click="del">销毁组件</button>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        
        new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                add(){
                    this.num++
                },
                del(){
                    // console.log(this);
                    this.$destroy();
                }
            },
            beforeCreate(){
                // console.log("【beforeCreate创建前】：创建前，此事无法在vm上访问data methods数据，数据代理未开始");
                // console.log(this.num);
                // debugger
            },
            created(){
                // console.log("【created创建后】：数据代理和数据劫持完成，可以在vm上访问data数据和mthods方法");
                // console.log(this.num);
                // debugger
            },
            beforeMount(){
                // console.log("【beforeMount挂载前】，此时页面呈现的是未经编译的dom结构，在此时对dom的操作，最终都不生效。将虚拟dom 存在vm上,方便后期diff比较",);
                // console.log(this.$el);
                // document.getElementById("btn").innerHTML = "改改改1"
                // debugger
            },
            mounted(){
                // console.log("【mounted挂载后】，此时页面呈现的是经编译的dom结构[将虚拟dom替换掉真实dom]，做初始化的工作： 创建定时器，发送ajax请求，发布订阅，创建自定义事件",this);
                // document.getElementById("btn").innerHTML = "改改改2"
                // debugger
            },
            beforeUpdate(){
                // console.log("【beforeUpdate 更新前】 数据被更新了，但是视图未被更新.",this);
                // console.log(this.num);
                // debugger
            },
            updated(){
                // console.log("【updated更新后】 数据被更新了，视图也被更新.此时，数据和视图保持同步",this);
                // debugger
            },
            beforeDestroy(){
                // console.log("【beforeDestroy 销毁前】，此时，data、methods、指令都处于可用状态，但是： methods 方法对数据的操作，都不会呈现到视图中。做收尾的工作。销毁定时器，解绑自定义事件");
                // console.log(this.num);
                // debugger
            },
            destroyed(){
                console.log("destroyed  销毁完成");
                console.log(this.num);
                debugger
            }
        })
    </script>
</html>